<template>
<Row>
    <Col span="8">
        <Steps :current="value.current" direction="vertical">
            <Step v-for="(item,index) in value.steps" :title="item.title" >
                <p><Button type="ghost" shape="circle" size="small" @click="handleSteps(index)">设为当前进度</Button></p>
            </Step>
        </Steps>
    </Col>
    <Col span="16">
        <Collapse :value="''+value.current">
            <Panel v-for="(item,index) in value.steps" :name="''+index">
                {{item.title}}
                <div slot="content">
                    <Tabs value="name1">
                        <TabPane label="默认材料" name="name1">
                            <Form>
                                <FormItem label="备注">
                                    {{item.content}}
                                </FormItem>
                                <FormItem label="附件">
                                    <a v-for="file in stepappendix(index)" :href="file.appendixUrl">{{file.appendixName}}</a>
                                </FormItem>
                            </Form>
                        </TabPane>
                        <TabPane label="服务方资料" name="name2">
                            <Form>
                                <FormItem label="备注">
                                    <Input type="textarea" v-model="value.steps[index].service.remark" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
                                </FormItem>
                                <FormItem label="附件">
                                     <UploadedList v-model="value.steps[index].service.appendix" :format="['doc','docx','pdf']"></UploadedList>
                                </FormItem>
                            </Form>
                        </TabPane>
                        <TabPane label="需求方材料" name="name3">
                            <Form>
                                <FormItem label="备注">
                                  {{value.steps[index].demand.remark}}
                                </FormItem>
                                <FormItem label="附件">
                                    <a v-for="file in demandAppendix(index)" :href="file.appendixUrl">{{file.appendixName}}</a>
                                </FormItem>
                            </Form>
                        </TabPane>
                    </Tabs>
                </div>
            </Panel>
        </Collapse>
    </Col>
    <Col span="8">
    </Col>
</Row>
</template>
<script>
    import UploadedList from '@/common/components/UploadedList.vue'

    export default {
        name: 'InvestmentAbutmentStepsPage',
        props: {
            value: {
                type: Object
            }
        },
        data(){
            return{

            }
        },
        computed:{
        },
        components:{
            UploadedList
        },
        methods:{
            handleSteps(index){
                this.value.current = index;
            },
            stepappendix(index){
                var appendixList =[];
                if(this.value.steps[index].appendix != null){
                    var count = this.value.steps[index].appendix.length;
                    for(var i = 0; i < count; i++){
                        var appendixUrl = this.value.steps[index].appendix[i].url;
                        var appendixName = this.value.steps[index].appendix[i].name;
                        appendixList.push({'appendixUrl': appendixUrl,'appendixName': appendixName});
                    }
                }
                return appendixList;
            },
            demandAppendix(index){
                var appendixList =[];
                if(this.value.steps[index].demand.appendix != null){
                    var count = this.value.steps[index].demand.appendix.length;
                    for(var i = 0; i < count; i++){
                        var appendixUrl = this.value.steps[index].demand.appendix[i].url;
                        var appendixName = this.value.steps[index].demand.appendix[i].name;
                        appendixList.push({'appendixUrl': appendixUrl,'appendixName': appendixName});
                    }
                }
                return appendixList;
            },
        }
    }
</script>
